import React from 'react';
import PropTypes from 'prop-types';
import { Switch, Route } from 'react-router-dom';
import Settings from './settings';
import Demo from './settings/components/Demo';
import Home from './Home';

class CheckInRouting extends React.Component {
  static propTypes = {
    stripes: PropTypes.shape({
      connect: PropTypes.func.isRequired,
    }).isRequired,
    location: PropTypes.object.isRequired,
    match: PropTypes.object.isRequired,
  };

  NoMatch() {
    return (
      <div>
        <h2>Uh-oh!</h2>
        <p>
          How did you get to
          {' '}
          <tt>{this.props.location.pathname}</tt>
          ?
        </p>
      </div>
    );
  }

  render() {
    const { showSettings, match: { path } } = this.props;

    if (showSettings) {
      return <Settings {...this.props} />;
    }

    return (
      <Switch>
        <Route
          path={`${path}`}
          exact
          component={() => <Home />}
        />
        <Route
          path={`${path}/settings/demo`}
          exact
          component={() => <Demo />}
        />
        <Route component={() => this.NoMatch()} />
      </Switch>
    );
  }
}

export default CheckInRouting;
